<template>
	<view class="container">
		<!-- 基本信息 -->
		<view class="info-box">
			<view class="toptext">基本信息</view>
			<view class="details-item">
				<text>申报人</text>
				<text class="details-item-right">{{quaDetail.createrName}}</text>
			</view>
			<view class="details-item">
				<text>项目</text>
				<text class="details-item-right">{{quaDetail.projectName}}</text>
			</view>
			<view class="details-item">
				<text>责任人</text>
				<text class="details-item-right">{{quaDetail.auditName}}</text>
			</view>
			<view class="details-item">
				<text>提交时间</text>
				<text class="details-item-right">{{regTime(quaDetail.createTime)}}</text>
			</view>
			<view class="details-item">
				<text>主题</text>
				<text class="details-item-right">{{quaDetail.title}}</text>
			</view>
			<view class="details-item">
				<text>发生时间</text>
				<text class="details-item-right">{{quaDetail.enventTime}}</text>
			</view>
			<view class="details-item">
				<text>结果</text>
				<text class="details-item-right">{{quaDetail.result}}</text>
			</view>
			<view class="content">
				<text>内容简述</text>
				<view class="content-text">{{quaDetail.content}}</view>
			</view>
		</view>
		<block v-if="quaDetail.otherExpenses.length>0">
			<view class="info-box" v-for="(item,index) of quaDetail.otherExpenses">
				<view class="toptext">其他费用{{index+1}}</view>
				<view class="details-item">
					<text>主题</text>
					<text class="details-item-right">{{item.title}}</text>
				</view>
				<view class="details-item">
					<text>原因</text>
					<text class="details-item-right">{{item.reason}}</text>
				</view>
				<view class="details-item">
					<text>类型</text>
					<text class="details-item-right">{{item.typeName}}</text>
				</view>
				<view class="details-item">
					<text>结果</text>
					<text class="details-item-right">{{item.result}}</text>
				</view>
				<view class="details-item">
					<text>金额</text>
					<text class="details-item-right">{{item.totalFee/100}}元</text>
				</view>
				<view class="details-item">
					<text>人数</text>
					<text class="details-item-right">{{item.count}}</text>
				</view>
				<view class="details-item">
					<text>开始时间</text>
					<text class="details-item-right">{{regTime(item.startTime)}}</text>
				</view>
				<view class="details-item">
					<text>结束时间</text>
					<text class="details-item-right">{{regTime(item.endTime)}}</text>
				</view>
				
				<!-- <view class="details-item">
					<text></text>
					<view class="img-box">
						<image class="img-size" src="../../static/images/shuijiao.jpg" mode=""></image>
					</view>
				</view> -->
			</view>
		</block>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quaDetail:{}
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		},
		methods: {
			regTime(timeStamp) {
				if (timeStamp) {
					return this.$utils.format(new Date(timeStamp), 'yyyy-MM-dd')
				}
			},
			getDetail(id) {
				this.$utils.http.post('/usual/detail/safety/'+id, {}).then(res => {
					if (res.code == 200) {
						this.quaDetail = res.data
						this.quaDetail.enventTime  = this.$utils.format(new Date(res.data.enventTime), 'yyyy-MM-dd');
						
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F9FC;
	}
</style>
<style scoped>
.container {
	width: 92%;
	margin: 20upx auto;
}
.info-box {
	width: 100%;
	background-color: #FFFFFF;
	padding: 20upx;
	box-sizing: border-box;
	border-radius: 10upx;
	margin-top: 20upx;
}
.title {
	font-size: 28upx;
	position: relative;
	
}
.toptext {
	font-size: 28upx;
	font-weight: bold;
	position: relative;
}
.toptext::before {
	content: '\e638';
	font-family: iconfont;
	/* width: 2px;
	height: 10px; */
	color: #0049FF;
	position: absolute;
	left: -36upx;
	top: 0upx;
	font-size: 36upx;
}
.details-item {
	border-bottom: 1px solid #EAEAEA;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 28upx;
	padding: 20upx 0upx;
}
.content {
	border-bottom: 1px solid #EAEAEA;
	font-size: 28upx;
	padding: 20upx 0upx;
}
.content-text {
	color: #909090;
}
.details-item-right {
	color: #909090;
}
.img-box {
	width: 80upx;
	height: 80upx;
}
.img-size {
	width: 100%;
	height: 100%;
	border-radius: 10upx;
}
</style>